<script lang="ts" setup>
import {nextTick, ref, watch} from "vue";
import {getCategoryPreListApi} from "@/api/category";
import type {CategoryPreItem} from "@/types/category";

/**
 *  @description 组件的props
 */
const props = withDefaults(defineProps<{
  /**
   * @description 当前组件的index，也就是当前组件是swiper中的第几个
   */
  tabIndex: number,
  /**
   * @description 当前swiper切换到第几个index
   */
  currentIndex: number,
  categoryId: number,
}>(), {
  categoryId: 1,
  tabIndex: 0,
  currentIndex: 0,
})

const dataList = ref<CategoryPreItem[]>([]) // 分页绑定的数据
const firstLoaded = ref(false) //  是否首次加载完成
const isCurrentPage = ref(false) // 是否是当前tab页
const paging = ref()
const queryList = async (pageNo: number, pageSize: number) => {
  const res = await getCategoryPreListApi(props.categoryId, pageNo, pageSize)
  firstLoaded.value = true
  if (res.code !== '1') {
    paging.value.complete(false)
  }
  paging.value.complete(res.data.data)
}
const itemClick = (item: any) => {
  console.log(item)
}

watch(props, (newVal) => {
      if (newVal.currentIndex === props.tabIndex) {
        // 当前tab页
        if (!firstLoaded.value) {
          // 首次加载
          nextTick(() => {
            setTimeout(() => {
              isCurrentPage.value = true
            }, 100)
          })
        }
      }
    },
    {immediate: true} //  立即执行
)

//点击跳往详情页
const goDetail = (id: string) => {
  uni.navigateTo({
    url: '/subPkg/detail/detail?id=' + id
  })
}
</script>

<template>
  <view :style="{background:dataList.length>=1?'':'#fff'}" class="content">
    <!--  :enable-back-to-top="currentIndex===tabIndex" 在微信小程序上可以多加这一句，因为默认是允许点击返回顶部的，但是这个页面有多个scroll-view，会全部返回顶部，所以需要控制是当前index才允许点击返回顶部 -->
    <!-- 如果当前页已经加载过数据或者当前切换到的tab是当前页，才展示当前页数据（懒加载） -->
    <z-paging v-if="firstLoaded||isCurrentPage" ref="paging" v-model="dataList" :fixed="false" @query="queryList">

      <!--    数据为空展示  -->
      <template v-slot:empty>
        <image mode="aspectFit" src="/static/empty-data.png" style="height: 600rpx"></image>
        <view class="text-gray">暂无数据哟ヾ(≧▽≦*)o</view>
      </template>
      <!--      加载中只有首次触发-->
      <template v-slot:loading>
        <view style="margin-top: 50rpx">
          <aw-loader></aw-loader>
        </view>
      </template>
<!--     没有更多 -->
      <template v-slot:loadingMoreNoMore>
        <view class="text-gray flex justify-center margin-top-lg" style="width: 100%">没有更多了~（＞人＜；）</view>
      </template>


      <!--    主体数据  -->
      <view v-for="(item, index) in dataList" :key="index" class="hot-list-item" @click="goDetail(item.animalID)">
        <view class="hot-list-item-left ">
          <uv-image :lazy-load="true" :mode="'aspectFill'" :src="item.imgURL" class="image"
                    height="100%" radius="10"
                    width="100%">
            <template v-slot:loading>
              <uv-image :mode="'aspectFill'" class="image" height="100%" src="/static/home-selected.png"
                        width="100%"></uv-image>
            </template>
          </uv-image>
        </view>
        <!--        <view v-else class="flex flex-column  justify-center align-center">
                  <uv-image :mode="'aspectFill'" class="image" height="180rpx"
                            src="/static/home-selected.png" width="180rpx"></uv-image>
                  <text style="font-size: 12px">图片暂缺</text>
                </view>-->
        <view class="hot-list-item-right padding-left-sm padding-tb-xs">
          <view class="name text-lg flex justify-start">{{ item.name }}
            <view class="search text-gray text-df margin-left-sm" style="font-style: italic">
              {{ item.searchCount! * 100 }}
              <text v-show="item.searchCount! > 100" class="cuIcon-hot line-red"></text>
            </view>
          </view>
          <view class="score flex justify-start align-center">
            <uni-rate :value="item.score! / 20" allow-half color="#c7c7c7" readonly size="18"/>
            <text class="text-awGreen margin-left-xs text-lg ">{{ item.score! / 10 }}</text>
          </view>
          <text class="desc text-df text-gray">
            {{ item.description }}
          </text>
          <view class="justify-end text-sm  margin-top-xs"
                style="max-width: 420rpx;max-height:30rpx;overflow: hidden">
            <text v-for="(tag, tagIndex) in item.tags?.split(',')" :key="tag + tagIndex"
                  class="cu-tag round margin-right-xs bg-gray sm" style="color: #8d8d8d">
              {{ tag }}
            </text>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<style lang="scss" scoped>
.content {
  height: 100%;
  background-color: #f1f1f1;
  padding: 20rpx 10rpx;

  .item {
    position: relative;
    height: 250rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.hot-list-item {
  border-radius: 10rpx;
  background-color: white;
  width: 100%;
  height: 230rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 20rpx;
  overflow: hidden;
  padding: 5rpx;

  &-left {
    height: 100%;
    flex: 5;
    display: flex;
    justify-content: center;
    align-items: center;

    .image {
      width: 95%;
      height: 95%;
    }
  }

  &-right {
    height: 100%;
    flex: 8;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .desc {
      width: 100%;
      word-wrap: break-word;
      word-break: normal;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2; // 保留几行
      -webkit-box-orient: vertical;
    }
  }
}
</style>